<template>
  <component v-bind="componentProps"
             v-on="componentListeners"
             :placement="placement"
             ref="buttonVesselPopover"
             :width="width || 230"
             popper-class="button-vessel"
             trigger="click"
             :is="componentName">
    <slot></slot>
    <!-- TIP  v-slot error and update slot-->
    <template slot="reference">
      <slot name="reference">
        <span :title="button"
              :class="['button-vessel-btn',`button-vessel-btn--${button}`]"
              @click="handleBodyClick($event)"
              v-bind="$attrs"></span>
      </slot>
    </template>
  </component>
</template>

<script>
import { Popover, Popconfirm } from 'element-ui'
import { pick, upperFirst, omit } from 'lodash'

export default {
  name: 'ButtonVessel',
  props: {
    ...Popover.props,
    ...Popconfirm.props,
    button: {
      type: String,
      default: 'edit'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    component: {
      type: String,
      default: 'popover',
      validator: (value) => {
        return value === 'popover' || value === 'popconfirm'
      }
    }
  },

  computed: {
    componentProps () {
      const hasProps = ['popperClass', 'trigger', 'value']
      if (this.component === 'popover') {
        return omit(pick(this.$props, [...Object.keys(Popover.props), 'placement']), hasProps)
      }

      if (this.component === 'popconfirm') {
        return omit(pick(this.$props, [...Object.keys(Popconfirm.props), 'placement']), hasProps)
      }
    },
    componentName () {
      return `El${upperFirst(this.component)}`
    },
    componentListeners () {
      const { show: orShow, ...rest } = this.$listeners
      const show = () => {
        if (typeof orShow === 'function') {
          orShow()
        }
      }

      return { show, ...rest }
    }
  },

  methods: {
    // TIP Repeat pop-up window
    handleBodyClick (e) {
      // TIP Click the button pop-up window not close
      if (this.$refs.buttonVesselPopover.showPopper) {
        this.$refs.buttonVesselPopover.handleDocumentClick(e)
      }

      document.body.click()
    }
  }

}
</script>

<style lang="scss">
.button-vessel {
  &-btn {
    width: 28px;
    height: 28px;
    display: inline-block;
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    &:hover {
      background-color: #e6f7ff;
    }
    &--edit {
      margin-right: 10px;
      background-image: url("../../../assets/mspbots/qa-bot/edit-bot-block.png");
      &:hover {
        background-image: url("../../../assets/mspbots/mapping/action_edit.png");
      }
    }
    &--add {
      margin-right: 10px;
      background-image: url("../../../assets/mspbots/mapping/add_account.png");
      &:hover {
        background-image: url("../../../assets/mspbots/mapping/add-circle-plus.png");
      }
    }
    &--delete {
      background-image: url("../../../assets/mspbots/qa-bot/escalation_delete.png");
      &:hover {
        background-image: url("../../../assets/mspbots/mapping/action_delete.png");
      }
    }
  }
}
</style>
